CSS 变换

阐述

变换是在不影响元素的布局位置（例如 CSS 流式布局、CSS 弹性盒布局）的情况下移动元素的方法，包括

• 平移：translate(<length>, <length>)、translateX(<length>) 和 translateY(<length>)
  • 当使用相对值长度时，它指向的是它自身的长度
• 缩放：scale(<number>) 和 scale(<number>, <number>)
  • 元素内含的其他元素和文本也会以相同比例缩放
• 旋转：rotate(<angle>)
• 倾斜：skew(<angle>)

这些变换可以连写，并按从右向左的顺序编写。变换可以指定一个原点，原点的语法为一或两个关键字或长度。

变换不能应用于 CSS 行内元素，但是可以在 display: inline-block 时使用。

实例

<style>
  @keyframes orbit {
    from {
      transform:
        rotate(0deg)
        translateX(80px);
    }
    to {
      transform:
        rotate(360deg)
        translateX(80px);
    }
  }
  
  @media (
    prefers-reduced-motion: no-preference
  ) {
    .moon {
      animation:
        orbit 6000ms linear infinite;
    }
  }
</style>

<div class="wrapper">
  <div class="planet"></div>
  <div class="moon"></div>
</div>

性质

相关内容

变换和 CSS 相对定位的区别在于使用相对值长度时，它指向的是它自身的长度。

变换和使用 CSS 外边距的区别在于外边距改变了布局内的位置。

参考文献